<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">

        div {
            width: 100px;
            height: 260px;
        }

        div.whiteborder {
            border: 2px white solid;
        }

        div.redDiv {
            background-color: red;
        }

        /*div.是限定标签调用的意思 */
        div.blueBorder {
            border: 5px blue solid;
        }

    </style>

    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">


        $(function () {

            //获取一个标签对象
            var divEle = $('div:first');

            $('#btn01').click(function () {
                //addClass() - 向被选元素添加一个或多个类
                divEle.addClass("redDiv blueBorder")
            });

            $('#btn02').click(function () {
                //removeClass() - 从被选元素删除一个或多个类
                divEle.removeClass("redDiv");
            });


            $('#btn03').click(function () {
                //toggleClass() - 对被选元素进行添加/删除类的切换操作
                divEle.toggleClass("redDiv");
            });


            $('#btn04').click(function () {
                //offset() - 返回第一个匹配元素相对于文档的位置。(也可以用来设置元素坐标)
                console.log(divEle.offset());

                divEle.offset({
                        top: 100,
                        left: 50
                    }
                )
            });


        })
    </script>
</head>
<body>

<table align="center">
    <tr>
        <td>
            <!--				第一个div-->
            <div class="border">
            </div>
        </td>

        <td>
            <div class="btn">
                <input type="button" value="addClass()" id="btn01"/>
                <input type="button" value="removeClass()" id="btn02"/>
                <input type="button" value="toggleClass()" id="btn03"/>
                <input type="button" value="offset()" id="btn04"/>
            </div>
        </td>
    </tr>
</table>


<br/> <br/>


<br/> <br/>


</body>
</html>